<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>五一倒计时</title>
		<style>
			html,
			body {
				padding: 0px;
				margin: 0px;
				background: #222;
				font-family: 'Karla', sans-serif;
				color: #FFF;
				height: 100%;
				overflow: hidden;
			}

			h1 {
				z-index: 1000;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-100%);
				font-size: 58px;
				/* border: 2px solid #FFF; */
				padding: 7.5px 15px;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 3px;
				overflow: hidden;
			}

			span {
				position: relative;
				display: inline-block;
				animation: drop 0.75s;
			}

			canvas {
				width: 100%;
				height: 100%;
			}

			@keyframes drop {
				0% {
					transform: translateY(-100px);
					opacity: 0;
				}

				90% {
					opacity: 1;
					transform: translateY(10px);
				}

				100% {
					transform: translateY(0px;
					)
				}
			}

			/*  */
			@import url("https://fonts.googleapis.com/css?family=Aleo");

			:root {
				font-family: "Aleo", sans-serif;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				background: rgb(119, 13, 13);
				background: radial-gradient(circle,
					rgba(119, 13, 13, 0.92) 64%,
					rgba(0, 0, 0, 0.6) 100%);
			}

			canvas {
				width: 100%;
				height: 100%;
			}


			.label {
				font-size: 2.2rem;
				background: url("img/6368077651977322227241996.png");
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
				animation: moveBg 30s linear infinite;
			}

			@keyframes moveBg {
				0% {
					background-position: 0% 30%;
				}

				100% {
					background-position: 1000% 500%;
				}
			}

			.middle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				user-select: none;
			}

			.time {
				color: #d99c3b;
				text-transform: uppercase;
				display: flex;
				justify-content: center;
			}

			.time span {
				padding: 0 14px;
				font-size: 0.8rem;
			}

			.time span div {
				font-size: 3rem;
			}

			@media (max-width: 740px) {
				.label {
					font-size: 1.7rem;
				}

				.time span {
					padding: 0 16px;
					font-size: 0.6rem;
				}

				.time span div {
					font-size: 2rem;
				}
			}
		</style>
	</head>

	<body>
		<canvas></canvas>
		<div class="middle">
			<!-- <h1 class="label">New Year Countdown </h1> -->
			<div class="time">
				<span>
					<div id="d">
						00
					</div>
					Days
				</span> <span>
					<div id="h">
						00
					</div>
					Hours
				</span> <span>
					<div id="m">
						00
					</div>
					Minutes
				</span> <span>
					<div id="s">
						00
					</div>
					Seconds
				</span>
			</div>
		</div>
		<script>
			class Snowflake {
				constructor() {
					this.x = 0;
					this.y = 0;
					this.vx = 0;
					this.vy = 0;
					this.radius = 0;
					this.alpha = 0;

					this.reset();
				}

				reset() {
					this.x = this.randBetween(0, window.innerWidth);
					this.y = this.randBetween(0, -window.innerHeight);
					this.vx = this.randBetween(-3, 3);
					this.vy = this.randBetween(2, 5);
					this.radius = this.randBetween(1, 4);
					this.alpha = this.randBetween(0.1, 0.9);
				}

				randBetween(min, max) {
					return min + Math.random() * (max - min);
				}

				update() {
					this.x += this.vx;
					this.y += this.vy;

					if (this.y + this.radius > window.innerHeight) {
						this.reset();
					}
				}
			}

			class Snow {
				constructor() {
					this.canvas = document.createElement("canvas");
					this.ctx = this.canvas.getContext("2d");

					document.body.appendChild(this.canvas);

					window.addEventListener("resize", () => this.onResize());
					this.onResize();
					this.updateBound = this.update.bind(this);
					requestAnimationFrame(this.updateBound);

					this.createSnowflakes();
				}

				onResize() {
					this.width = window.innerWidth;
					this.height = window.innerHeight;
					this.canvas.width = this.width;
					this.canvas.height = this.height;
				}

				createSnowflakes() {
					const flakes = window.innerWidth / 4;

					this.snowflakes = [];

					for (let s = 0; s < flakes; s++) {
						this.snowflakes.push(new Snowflake());
					}
				}

				update() {
					this.ctx.clearRect(0, 0, this.width, this.height);

					for (let flake of this.snowflakes) {
						flake.update();

						this.ctx.save();
						this.ctx.fillStyle = "#FFF";
						this.ctx.beginPath();
						this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
						this.ctx.closePath();
						this.ctx.globalAlpha = flake.alpha;
						this.ctx.fill();
						this.ctx.restore();
					}
					requestAnimationFrame(this.updateBound);
				}
			}
			//雪花
			// new Snow();

			//烟花
			var ctx = document.querySelector('canvas').getContext('2d')
			ctx.canvas.width = window.innerWidth
			ctx.canvas.height = window.innerHeight

			var sparks = []
			var fireworks = []
			var i = 20;
			while (i--) {
				fireworks.push(
					new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random())
				)
			}

			render()

			function render() {
				setTimeout(render, 1000 / 60)
				ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
				ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
				for (var firework of fireworks) {
					if (firework.dead) continue
					firework.move()
					firework.draw()
				}
				for (var spark of sparks) {
					if (spark.dead) continue
					spark.move()
					spark.draw()
				}

				if (Math.random() < 0.05) {
					fireworks.push(new Firework())
				}
			}

			function Spark(x, y, color) {
				this.x = x
				this.y = y
				this.dir = Math.random() * (Math.PI * 2)
				this.dead = false
				this.color = color
				this.speed = Math.random() * 3 + 3;
				this.walker = new Walker({
					radius: 20,
					speed: 0.25
				})
				this.gravity = 0.25
				this.dur = this.speed / 0.1
				this.move = function() {
					this.dur--
					if (this.dur < 0) this.dead = true

					if (this.speed < 0) return
					if (this.speed > 0) this.speed -= 0.1
					var walk = this.walker.step()
					this.x += Math.cos(this.dir + walk) * this.speed
					this.y += Math.sin(this.dir + walk) * this.speed
					this.y += this.gravity
					this.gravity += 0.05

				}
				this.draw = function() {
					drawCircle(this.x, this.y, 3, this.color)
				}
			}

			function Firework(x, y) {
				this.xmove = new Walker({
					radius: 10,
					speed: 0.5
				})
				this.x = x || Math.random() * ctx.canvas.width
				this.y = y || ctx.canvas.height
				this.height = Math.random() * ctx.canvas.height / 2
				this.dead = false
				this.color = randomColor()

				this.move = function() {
					this.x += this.xmove.step()
					if (this.y > this.height) this.y -= 1;
					else this.burst()

				}
				this.draw = function() {
					drawCircle(this.x, this.y, 1, this.color)
				}
				this.burst = function() {
					this.dead = true
					var i = 100;
					while (i--) sparks.push(new Spark(this.x, this.y, this.color))
				}
			}

			function drawCircle(x, y, radius, color) {
				color = color || '#FFF'
				ctx.fillStyle = color
				ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius)
			}

			function randomColor() {
				return ['#6ae5ab', '#88e3b2', '#36b89b', '#7bd7ec', '#66cbe1'][Math.floor(Math.random() * 5)];
			}

			function Walker(options) {
				this.step = function() {
					this.direction = Math.sign(this.target) * this.speed
					this.value += this.direction
					this.target ?
						this.target -= this.direction :
						(this.value) ?
						(this.wander) ?
						this.target = this.newTarget() :
						this.target = -this.value :
						this.target = this.newTarget()
					return this.direction
				}

				this.newTarget = function() {
					return Math.round(Math.random() * (this.radius * 2) - this.radius)
				}

				this.start = 0
				this.value = 0
				this.radius = options.radius
				this.target = this.newTarget()
				this.direction = Math.sign(this.target)
				this.wander = options.wander
				this.speed = options.speed || 1
			}
			////////////////////////////////////////////////////////////

			// Simple CountDown Clock
			// 自定义时间
			const comingdate = new Date("4 30, 2020 18:00:00");

			const d = document.getElementById("d");
			const h = document.getElementById("h");
			const m = document.getElementById("m");
			const s = document.getElementById("s");

			const countdown = setInterval(() => {
				const now = new Date();
				const des = comingdate.getTime() - now.getTime();
				const days = Math.floor(des / (1000 * 60 * 60 * 24));
				const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				const mins = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
				const secs = Math.floor((des % (1000 * 60)) / 1000);

				d.innerHTML = getTrueNumber(days);
				h.innerHTML = getTrueNumber(hours);
				m.innerHTML = getTrueNumber(mins);
				s.innerHTML = getTrueNumber(secs);

				if (x <= 0) clearInterval(x);
			}, 1000);

			const getTrueNumber = x => (x < 10 ? "0" + x : x);
		</script>
	</body>

</html>
